<template>
  <div class="profile-container">
    <div class="operation">
      <el-form size="medium" :inline="true" v-model="conditions">
        <el-form-item label="ID">
          <el-input placeholder="请输入ID" v-model="conditions.id"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="conditions.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="pageByCond()">查询</el-button>
          <el-button type="success" @click="toInsert()">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table">
      <el-card class="box-card">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="id" label="ID" width="220"> </el-table-column>
          <el-table-column prop="imageId" label="图片" width="150">
            <template slot-scope="scope">
              <img :src="getImageUrl(scope.row.imageId)" style="width: 50px; height: 50px; object-fit: cover;">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" width="150">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="150">
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" style="margin-right: 10px" @click="handleEdit(scope.row)">编辑</el-button>

              <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
                <el-button size="mini" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="pagination">
      <el-pagination background layout="sizes,total, prev, pager, next,jumper" :current-page="pagination.currentPage"
        :page-sizes="[5]" :page-size="this.pagination.pageSize" :total="pagination.total"
        @current-change="handleCurrentChange" @size-change="handleSizeChange">
      </el-pagination>
    </div>

    <div class="dialog">
      <el-dialog title="编辑信息" :visible.sync="dialog.visible" width="30%">
        <el-card shadow="never">
          <div class="item">
            <div class="title">
              <div class="div">名</div>
              <div class="div">称</div>
            </div>
            <div class="value">
              <el-input style="width: 200px" v-model="dialog.data.name"></el-input>
            </div>
          </div>

          <div class="item">
            <div class="title">
              <div class="div">价</div>
              <div class="div">格</div>
            </div>
            <div class="value">
              <el-input style="width: 200px" v-model="dialog.data.price"></el-input>
            </div>
          </div>
          <!-- <div class="item" style="height: 150px;">
            <div class="title">
              <div class="div">图</div>
              <div class="div">片</div>
            </div>
            <div class="value" style="height: 150px;">
              <el-upload action="http://localhost:8000/api/files/upload" list-type="picture-card"
                :on-preview="handlePreview" :on-success="handleSuccess" :on-remove="handleRemove" :file-list="fileList">
                <i v-if="fileList.length === 0" slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                      <i class="el-icon-download"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
          </div> -->
          <div class="item" style="height: 150px;">
            <div class="title">
              <div class="div">图</div>
              <div class="div">片</div>
            </div>
            <div class="value" style="height: 150px;">
              <el-upload class="avatar-uploader" action="http://localhost:8000/api/files/upload" :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="dialog.data.imageId" :src="getImageUrl(dialog.data.imageId)" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>

        </el-card>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.visible = false">取 消</el-button>
          <el-button type="primary" @click="save()">保 存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],

      tableData: [],
      conditions: {
        id: '',
        name: '',
        price: '',
      },

      pagination: {
        pageSize: 5,
        currentPage: 1,
        total: 0,
      },
      dialog: {
        data: {
          name: '',
          price: '',
          imageId: '',
        },

        isUpdate: false,
        visible: false,
      },
    }
  },
  created() {
    this.pageByCond()
  },
  methods: {
    resetDialog() {
      this.dialog = {
        data: {
          name: '',
          price: '',
          imageId: '',
        },

        isUpdate: false,
        visible: false,
      }
    },
    handleDelete(row) {
      this.$api.product.remove(row.id).then((res) => {
        if ((res.code = 200)) {
          this.$message.success({
            type: 'success',
            message: '删除成功',
          })
          this.pageByCond()
        }
      })
    },
    handleEdit(row) {
      this.dialog.isUpdate = true
      this.dialog.visible = true
      this.dialog.data.id = row.id
      this.dialog.data.name = row.name
      this.dialog.data.price = row.price
      this.dialog.data.imageId = row.imageId
    },
    save() {
      if (this.dialog.isUpdate) {
        this.$api.product.updateById(this.dialog.data).then((res) => {
          if ((res.code = 200)) {
            this.$message.success({
              type: 'success',
              message: '修改成功',
            })
            this.pageByCond()
            this.dialog.visible = false
          }
        })
      } else {
        this.$api.product.create(this.dialog.data).then((res) => {
          if ((res.code = 200)) {
            this.$message.success({
              type: 'success',
              message: '新增成功',
            })
            this.pageByCond()
            this.dialog.visible = false
          }
        })
      }

    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      this.dialog.data.imageId = res.data.id

    },
    getImageUrl(imageId) {
      return `http://localhost:8000/api/files/download/${imageId}`
    },
    handleSuccess(response, file, fileList) {
      this.dialog.data.imageId = response.data.id
    },
    handleRemove(file) {
      this.fileList = []
      this.dialog.data.imageId = ''
    },
    handlePictureCardPreview(file) {
      console.log(file.response.data.id);

      this.dialogImageUrl = this.getImageUrl(file.response.data.id);
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    handlePreview(file) {
      console.log(file);
    },
    pageByCond() {
      this.$api.product
        .pageByCond(
          this.pagination.currentPage,
          this.pagination.pageSize,
          this.conditions
        )
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.records
            this.pagination.total = res.data.total
          }
        })
    },
    toInsert() {
      this.dialog = {
        data: {
          name: '',
          price: '',
          imageId: ''
        },
        isUpdate: false,
        visible: true,
      }
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.pageByCond()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pageByCond()
    },
  },
}
</script>

<style lang="scss" scoped>
.el-dialog {
  .avatar-uploader {
    width: 148px;
    height: 148px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  // .avatar-uploader .el-upload {
  //   border: 1px dashed #d9d9d9;
  //   border-radius: 6px;
  //   cursor: pointer;
  //   position: relative;
  //   overflow: hidden;
  // }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }

  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
}

.profile-container {
  .operation {
    .el-form {
      .el-form-item {
        margin: 0 20px 0 0;

        &:first-child {
          margin-left: 30px;
        }
      }
    }
  }

  .table {
    margin: 20px 0;

    .el-card {
      height: 375px;
    }
  }

  .dialog {


    .el-card {
      background-color: white;
      border: 0;
      border-radius: 0;
      margin-bottom: 10px;
    }

    .item {
      position: relative;
      height: 40px;
      display: flex;
      margin-bottom: 10px;

      &:last-child {
        margin: 0;
      }

      .title {
        display: flex;
        width: 64px;
        justify-content: space-between;
        margin-right: 40px;
        align-items: center;
      }

      .value {
        line-height: 40px;

        .el-tag {
          margin-right: 10px;
        }


      }
    }
  }
}
</style>